<template>
  <div class="mod-demo-echarts">
    <el-alert
      title=""
      type="warning">
      提示：自动更新未完成，请手动刷新
    </el-alert>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div id="J_chartLineBox" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts'
// import axios from 'axios'

export default {
  data () {
    return {
      chartLine: null
    }
  },
  mounted () {
    this.initChartLine()
  },
  activated () {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartLine) {
      this.chartLine.resize()
    }
  },
  methods: {
    // 折线图
    initChartLine () {
      var option = {
        'title': {
          'text': '设备状态可视化'
        },
        'tooltip': {
          'trigger': 'axis'
        },
        'legend': {
          'data': ['异常', '正常']
        },
        'grid': {
          'left': '3%',
          'right': '4%',
          'bottom': '3%',
          'containLabel': true
        },
        'toolbox': {
          'feature': {
            'saveAsImage': {}
          }
        },
        'xAxis': {
          'type': 'category',
          'boundaryGap': false,
          'data': ['现在', '1小时前', '2小时前', '3小时前', '4小时前', '5小时前', '6小时前', '7小时前', '8小时前', '9小时前', '10小时前', '11小时前']
        },
        'yAxis': {
          'type': 'value'
        },
        color: ['#B22222', '#3CB371'],
        'series': [
          {
            'name': '异常',
            'type': 'line',
            'stack': '总量e',
            'data': []
          },
          {
            'name': '正常',
            'type': 'line',
            'stack': '总量n',
            'data': []
          }
        ]
      }
      this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
      this.$http.get('http://121.37.31.22:8080/renren-fast/alarm/message/getEcharts').then(res => {
        option.series[0].data = res.data.errors
        console.log(res.data.normals)
        option.series[1].data = res.data.normals
        this.chartLine.setOption(option)
      })

      window.addEventListener('resize', () => {
        this.chartLine.resize()
      })
    }
    // 柱状图
    // 饼状图

    // 散点图
  }
}
</script>

<style lang="scss">
.mod-demo-echarts {
  > .el-alert {
    margin-bottom: 10px;
  }

  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;

    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }

  .chart-box {
    min-height: 400px;
  }
}
</style>
